<template>
    <fieldset>
        <legend>container组件</legend>
        <div id="container">
            <!-- <slotScope>
            <template
                v-slot:scope="{ a }">
                <h1 v-for="(item, index) in a" :key="index">
                    {{ item }}
                </h1>
            </template>
        </slotScope> -->

            <modal :visible="visible" @on-cancel="cancel" @on-confirm="confirm"></modal>

            <button @click="showModal">点击显示模态框</button>

            <!-- <mixCom></mixCom> -->

            <!-- <dynamicCom></dynamicCom> -->
            <!-- <tab></tab> -->
            <!-- <keepCom></keepCom> -->
            <!-- <usuallApi></usuallApi> -->
            <transitionCom></transitionCom>
        </div>
    </fieldset>
</template>

<script>
//插槽作用域的流程:
//1.在slot标签上动态绑定一个属性

//2.在组件标签中间的内容,template上加上表达式v-slot ='data' 这个data是一个对象,里面的属性就是slot动态传递的属性

import slotScope from "../slotScope"
import mixCom from "../mixCom"
import modalMix from "../../mixins/modal"
import dynamicCom from "../dynamicCom/index.vue"
import tab from "../tab"
import keepCom from "../keepCom"
import usuallApi from "../usuallApi"
import transitionCom from "../transition"
export default {
    mixins: [modalMix],
    components: {
        tab,
        dynamicCom,
        slotScope,
        mixCom,
        keepCom,
        usuallApi,
        transitionCom
    }
}
</script>